<template>
  <el-upload
    class="cover-uploader"
    name="file"
    :show-file-list="false"
    accept=".png,.PNG,.jpg,.JPG,.jpeg,.JPEG,.gif,.GIF,.bmp,.BMP"
    :multiple="false"
    :http-request="uploadImage"
  >
    <template v-if="modelValue">
      <img class="cover" :src="proxy.imageUrl + modelValue" />
    </template>
    <el-icon v-else class="cover-uploader-icon"><Plus /></el-icon>
  </el-upload>
</template>

<script setup>
import { getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();

// 获取数据
const props = defineProps({
  modelValue: {
    type: String,
    default: null,
  },
});
// 上传图片
const emit = defineEmits()
const uploadImage = async (uploadFile) => {
  let result = await proxy.Request({
    url: "file/uploadImage",
    dataType: "file",
    params: {
      file: uploadFile.file,
      type: 0,
    },
  });
  const fileName=result.data.fileName
  emit("update:modelValue",fileName)
};
</script>

<style lang="scss">
.cover-uploader .cover {
  width: 178px;
  height: 178px;
  display: block;
}
.cover-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}
.cover-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.cover-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>